<template>
    <div>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html" id="0">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html" id="1">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html" id="2">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html" id="3">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html" id="4">
							娱乐
						</a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html" id="5">
							知多
						</a>
					</div>
				</div>

			</div>

				<!-- 图片 -->
				<ul>
					<li v-for="(item,index) in message" :key="item.pic" class="listO">
						<router-link :to="'/home/photoinfo/'+index">
							<img v-lazy="item.pic" >
							<div class="text">
								<h3>{{item.src}}</h3>
								<p>{{item.title}}</p>
							</div>
						</router-link>
						
					</li>
				</ul>
    </div>


</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
    data() {
        return {
            message:[]//图片信息
        }
	},
	created() {
		this.getPeac()
	},
    methods: {
      getPeac(){
		  this.$http.jsonp('https://api.jisuapi.com/news/get?channel=%E5%A4%B4%E6%9D%A1&start=4&num=40&appkey=2aab973f248a3b34').then( res => {
			//   console.log(res.body.result.list)
			  this.message = res.body.result.list
		  })
		  .catch(err => {
			  cosnole.log(err)
		  })
	  }  
    },
    mounted() {
        mui('.mui-scroll-wrapper').scroll({
	    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
    },
}
</script>

<style lang="scss" scoped>
    *{
        touch-action: pan-x;
		ul{
			padding:0 10px 10px 10px;
			margin:0;
			li{
				list-style: none;
				padding:0;
				margin:6px 0 0;
				position:relative;
			
				img{
					width:100%;
					vertical-align: middle;
					// display:block;
				}
				image[lazy=loading] {
					width: 40px;
					height: 300px;
					margin: auto;
				}
				.text{
				    color:#fff;
					position:absolute;
					bottom:0;
					width:100%;
					height:60px;
					background: rgba(14, 13, 13,.5);
					h3{
						font-size: 14px;
					}
					p{
						font-size:12px;
						color:#fff;
					}
				}
			}
		}
    }

</style>